<template>
    <div class="common-form">
        <div class="common-form-title">
            数据筛选
            <div class="change-show-btn">
                <el-button @click="changeShow" size="mini">
                    <i :class="isShow?'el-icon-caret-bottom':'el-icon-caret-top'"></i>
                </el-button>
            </div>
        </div>
        <transition name="el-fade-in">
            <div class="elform" v-show="isShow">
                <el-form  :model="form" ref="form" :inline="inline" :label-width="lableWidth? lableWidth: '90' + 'px'" :label-position="labelPosition ? labelPosition : ''">
                    <el-form-item v-for="item in formLabel" :key="item.model" :label="item.label" size="small">
                        <el-input v-model="form[item.model]" :placeholder="'请输入'+item.label" clearable v-if="item.type === 'input'"></el-input>

                        <el-select v-model="form[item.model]" :placeholder="item.label" v-if="item.type === 'select'">
                            <el-option v-for="opt in item.opts" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
                        </el-select>

                        <el-date-picker
                            v-model="form[item.model]" v-if="item.type === 'date'"
                            type="daterange"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>

                        <el-radio-group v-model="form[item.model]" v-if="item.type === 'radio'">
                            <el-radio v-for="rad in item.rads" :key="rad.value" :label="rad.value">{{rad.label}}</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item size="small">
                        <!-- 作用域插槽 -->
                        <slot></slot>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
    </div>

</template>
<script>
export default {
  props: {
    inline: Boolean,
    lableWidth: String,
    form: Object,
    formLabel: Array
  },
  data () {
    return {
      labelPosition: 'right',
      isShow: true // 是否显示
    }
  },
  methods: {
    // // 点击搜索返回form
    // search () {
    //   this.$emit('search', this.form)
    // },
    // reset () {
    //   for (const key in this.form) {
    //     this.form[key] = ''
    //   }
    //   this.$emit('reset', this.form)
    // }
    // 是否显示搜索栏
    changeShow () {
      this.isShow = !this.isShow
    }
  },
  created () {
    // console.log('commonform', this.formLabel)
  }
}
</script>

<style lang="scss" scoped>
    .common-form {
        margin-bottom: 20px;
        // margin: 25px 0;
        border-width: 1px;
        border-style: solid;
        border-radius: 2px;
        border-color: #e6e6e6;
        border-top: none;
        .common-form-title{
            position: relative;
            height: 42px;
            line-height: 42px;
            padding: 0 15px 0 35px;
            color: #333;
            background-color: #f2f2f2;
            cursor: pointer;
            font-size: 14px;
            border-bottom: 1px solid #e6e6e6;
            .change-show-btn{
                position: absolute;
                right: 20px;
                top: 0;
            }
        }
        .elform{
            padding: 10px 45px;
        }
    }
    .el-form-item{
            /deep/.el-form-item__label{
                font-weight: 700 !important;
            }
            .el-form-item__content{
            }
            /deep/.el-select .el-input__inner {
                width: 100px;
            }
            /deep/.el-radio-group{
                padding-top: 6px;
            }
        }
</style>
